<ng-container>
  <div class="builder-menu">
    <button
      aria-label="builder page"
      [matTooltip]="'更多'"
      mat-icon-button
      [mat-menu-trigger-for]="menu"
    >
      <app-icon [content]="{ svg: 'dots-vertical', inline: true }" />
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="onPageJson()">
        <div class="flex items-center">
          <app-icon [content]="{ svg: 'code-json' }" />
          <span matListItemTitle>页面 JSON</span>
        </div>
      </button>
      @if (canShow) {
        <button mat-menu-item>
          <mat-slide-toggle [checked]="debugAnimate$ | async" (change)="onDebugAnimate($event)"
            ><span class="text-base">动画调式</span></mat-slide-toggle
          >
        </button>
      }
      <button mat-menu-item (click)="onPreview()">
        <div class="flex items-center">
          <app-icon [content]="{ svg: 'eye' }" />
          <span matListItemTitle>草稿预览</span>
        </div>
      </button>
      @if (page && page.uuid) {
        <button mat-menu-item (click)="onPageSetting(page)">
          <div class="flex items-center">
            <app-icon [content]="{ svg: 'cog' }" />
            <span matListItemTitle>页面设置</span>
          </div>
        </button>
      }
    </mat-menu>
  </div>
</ng-container>
